import React from 'react';
import { formatMessage } from 'umi-plugin-react/locale';
import styles from '@/pages/DataStatistics/AnswerDetailStatis/index.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Card, Col, Row, Select, Tabs } from 'antd';
import GraphStatistics from '@/pages/DataStatistics/AtlasStatistics/graphStatistics';
import { doRobotList } from '@/services/robotManagement';
import { fetchAtlasStatistics } from '@/services/datastatistics';

class AtlasStatistics extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      robotList: [],
      activeKey: '1'
    }
  }

  componentDidMount() {
    this.getRobot();
    this.GraphStatistics.getList();
  }

  /**
   * 获取所有机器人（作为筛选条件）
   */
  getRobot = async () => {
    const res = await doRobotList({ current: 1, size: 999999 });
    this.setState({ robotList: res })
  }

  /**
   * tab切换
   * @returns {*}
   */
  tabCallback = key => {
    this.setState({ activeKey: key }, () => {
      this.GraphStatistics.getList();
    })
  }

  render() {
    const { robotList, activeKey } = this.state;
    const columns = [
      { title: formatMessage({ id: 'atlasStatistics.knowledgeAtlasName' }), dataIndex: 'atlasName', key: 'atlasName', width: 200 },
      { title: formatMessage({ id: 'atlasStatistics.knowledgeAtlasTriggerCount' }), dataIndex: 'atlasNum', key: 'atlasNum', width: 150 },
      { title: formatMessage({ id: 'atlasStatistics.nodeTriggerTotalCount' }), dataIndex: 'nodesNum', key: 'nodesNum', width: 130 },
      { title: formatMessage({ id: 'atlasStatistics.categoryNodeCount' }), dataIndex: 'typeNum', key: 'typeNum', width: 120 },
      { title: formatMessage({ id: 'atlasStatistics.categoryNodeTriggerTotalCount' }), dataIndex: 'typeHit', key: 'typeHit', width: 160 },
      { title: formatMessage({ id: 'atlasStatistics.intentNodeCount' }), dataIndex: 'intentNum', key: 'intentNum', width: 120 },
      { title: formatMessage({ id: 'atlasStatistics.intentNodeTriggerTotalCount' }), dataIndex: 'intentHit', key: 'intentHit', width: 160 },
      { title: formatMessage({ id: 'atlasStatistics.resolvedCount' }), dataIndex: 'solveNum', key: 'solveNum', width: 120 },
      { title: formatMessage({ id: 'atlasStatistics.unresolvedCount' }), dataIndex: 'unsolvedNum', key: 'unsolvedNum', width: 120 },
    ];
    const columnsNode = [
      { title: formatMessage({ id: 'atlasStatistics.nodeTitle' }), dataIndex: 'name', key: 'name', width: 200 },
      { title: formatMessage({ id: 'atlasStatistics.hitCount' }), dataIndex: 'hit', key: 'hit', width: 100 },
      { title: formatMessage({ id: 'atlasStatistics.unresolvedCount' }), dataIndex: 'unsolved', key: 'unsolved', width: 100, },
      { title: formatMessage({ id: 'atlasStatistics.unresolvedRatio' }), dataIndex: 'ratio', key: 'ratio', width: 100 },
    ];

    return (
      <div style={{ height: '100%' }}>
        <PageHeaderWrapper>
          <Card style={{ height: '100%' }} bodyStyle={{ padding: '10px 24px' }}>
            <Row>
              <Tabs activeKey={activeKey} onChange={this.tabCallback}>
                <Tabs.TabPane tab={formatMessage({ id: 'atlasStatistics.knowledgeAtlasStatistics' })} key="1">
                  <GraphStatistics robotList={robotList} columns={columns} statisticsType={'atlas'} onRef={ref => this.GraphStatistics = ref} />
                </Tabs.TabPane>
                <Tabs.TabPane tab={formatMessage({ id: 'atlasStatistics.knowledgeAtlasNodeStatistics' })} key="2">
                  <GraphStatistics robotList={robotList} columns={columnsNode} statisticsType={'atlasNode'} onRef={ref => this.GraphStatistics = ref} />
                </Tabs.TabPane>
              </Tabs>
            </Row>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default AtlasStatistics
